<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/11/18
  Time: 22:53
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>首页</title>
</head>

    <style>
        .box { margin: 0px auto; width:600px;}
        form,table { text-align: center; margin: 0px auto;}
        .content {
            margin-top:30px;
            width:450px;
        }
    </style>

<body>
    <div class="box">
        <table border="1px">
            <input type="hidden" name="pageIndex" value="1"/>
            <tr>
                <td>图书名称：</td>
                <td><input type="text" name="bookName"></td>
                <td><input type="text" name="bookAuthor"></td>
                <td>类别：</td>
                <td>
                    <select name="bookType">
                        <option value="历史" selected>历史</option>
                        <option value="科普">科普</option>
                        <option value="武侠">武侠</option>
                        <option value="曲艺">曲艺</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="6">
                    <button class="search">搜索</button>
                </td>
            </tr>
        </table>

        <table border="1px" class="content">
            <thead>
            <th>图书名称</th>
            <th>作者</th>
            <th>类别</th>
            <th>查看详情</th>
            </thead>
            <tbody>
            <%--<c:if test="${not empty bookList}">
                <c:forEach items="${bookList}" var="book">
                    <tr>
                        <td>${book.bookName}</td>
                        <td>${book.bookAuthor}</td>
                        <td>${book.bookType}</td>
                        <td>${book.bookDescription}</td>
                    </tr>
                </c:forEach>
            </c:if>--%>
            </tbody>
        </table>

    </div>

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
    <script>
        $(function(){
            $(".search").click(function(){
                var param = { 'bookName': $("input[name=bookName]").val(), 'pageIndex' : $("input[name=pageIndex]").val(),
                    "bookType":$("select[name=bookType]").val(), "bookAuthor": $("input[name=bookAuthor]").val()};
                $.ajax({
                    url: 'book?opr=findAll',
                    data : param,  //serialize() 方法通过序列化表单值，创建 URL 编码文本字符串
                    dataType : 'JSON',
                    type : 'POST',
                    success : function(data)  {
                        var $str = "";
                        $(".content tbody").html("");  //清空
                        for (var i = 0; i < data.length; i++) {
                            var book = data[i];
                            $str += "<tr><td>"+ book.bookName+"</td><td>"+book.bookAuthor+"</td>"+
                                "<td>" + book.bookType+"</td><td><a href='book?opr=finById&id=" + book.bookId+"'>详情</a>"+
                                "</td></tr>";
                        }
                        $(".content").append($str);
                    }
                });
            });
        });
    </script>
</body>
</html>
